<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <!-- 评论列表 -->
  <div
    th:fragment="comment_list(hotComment, comments, article)"
    class="comment-list-wrap bg-color-white"
    id="commentList">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" style="display:none;" class="">
        <symbol id="icon-comment" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M4.62739 1.25C2.9347 1.25 1.5625 2.6222 1.5625 4.31489L1.56396 12.643C1.56403 14.3356 2.9362 15.7078 4.62885 15.7078H6.48326L6.93691 17.6869L6.93884 17.6948C7.16894 18.6441 8.28598 19.0599 9.08073 18.4921L12.7965 15.7078H15.5001C17.1928 15.7078 18.565 14.3355 18.565 12.6428L18.5635 4.31477C18.5635 2.62213 17.1913 1.25 15.4986 1.25H4.62739ZM5.98265 9.89255C6.68783 9.89255 7.2595 9.32089 7.2595 8.61571C7.2595 7.91053 6.68783 7.33887 5.98265 7.33887C5.27747 7.33887 4.70581 7.91053 4.70581 8.61571C4.70581 9.32089 5.27747 9.89255 5.98265 9.89255ZM9.95604 9.89255C10.6612 9.89255 11.2329 9.32089 11.2329 8.61571C11.2329 7.91053 10.6612 7.33887 9.95604 7.33887C9.25086 7.33887 8.6792 7.91053 8.6792 8.61571C8.6792 9.32089 9.25086 9.89255 9.95604 9.89255ZM15.2124 8.61571C15.2124 9.32089 14.6407 9.89255 13.9355 9.89255C13.2304 9.89255 12.6587 9.32089 12.6587 8.61571C12.6587 7.91053 13.2304 7.33887 13.9355 7.33887C14.6407 7.33887 15.2124 7.91053 15.2124 8.61571Z"
          ></path>
        </symbol>
        <symbol id="icon-zan" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M13.0651 3.25923C12.6654 2.21523 12.1276 1.60359 11.4633 1.40559C10.8071 1.21 10.2539 1.48626 9.97848 1.67918C9.43962 2.05668 9.17297 2.64897 9.0009 3.12662C8.93522 3.30893 8.87504 3.50032 8.82077 3.67291L8.82077 3.67292C8.80276 3.73019 8.78541 3.78539 8.76872 3.8375C8.6974 4.06017 8.63455 4.23905 8.56561 4.38315C8.07104 5.41687 7.64014 6.034 7.2617 6.43277C6.89154 6.8228 6.5498 7.0275 6.18413 7.21038C5.8887 7.35813 5.69369 7.66144 5.69365 8.00211L5.69237 17.3908C5.6923 17.8783 6.08754 18.2736 6.57511 18.2736H14.8382C15.2621 18.2736 15.5829 18.1393 15.8149 17.9421C15.9234 17.8497 15.9985 17.7554 16.0484 17.6856C16.0695 17.6561 16.088 17.6282 16.0983 17.6126L16.1017 17.6075L16.1033 17.6051L16.1194 17.5857L16.1428 17.5478C16.913 16.3019 17.4472 15.3088 17.8659 14.1183C18.3431 12.7613 18.5849 11.5853 18.6874 10.6685C18.7871 9.77617 18.7612 9.07318 18.6558 8.68779C18.5062 8.14118 18.138 7.82653 17.7668 7.66617C17.4231 7.51771 17.0763 7.49836 16.8785 7.49807L13.1134 7.44551C13.662 5.19751 13.31 3.89889 13.0651 3.25923ZM1.251 8.0848C1.22726 7.5815 1.62891 7.16046 2.13277 7.16046H3.4408C3.92832 7.16046 4.32354 7.55568 4.32354 8.04321V17.4303C4.32354 17.9178 3.92832 18.313 3.4408 18.313H2.57554C2.10419 18.313 1.71599 17.9427 1.69378 17.4718L1.251 8.0848Z"
          ></path>
        </symbol>
      </svg>
    </div>
    <div class="comment-write-wrap">
      <img
        th:if="${global.isLogin}"
        th:alt="${global.user.userName}"
        th:src="${global.user.photo}"
        class="comment-write-img"
      />
      <!-- <div th:if="${!global.isLogin}"></div> -->
      <div class="common-write-content">
        <textarea
          th:data-target="${global.isLogin ? '' : '#loginModal'}"
          th:data-toggle="${global.isLogin ? '' : 'modal'}"
          th:placeholder="${global.isLogin ? '讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！' : '请先登录后再评论'}"
          class="comment-write-textarea"
          id="commentContent"
          maxlength="512"
        ></textarea>
        <button
          id="commentBtn"
          type="button"
          class="comment-write-btn c-btn c-btn-disabled"
          disabled>
          评论
        </button>
      </div>
    </div>

    <!-- 评论列表 -->
    <div th:class="${(#lists.isEmpty(comments) ? ' no-comment-box' : '')}">
      <!-- 热门评论  -->
      <div th:if="${hotComment != null}" class="comment-list-wrap hot-comment bg-color-white">
        <h4 class="hot-comment-title">
          热门评论
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/aife/technology-platform-fe/preview/dist/static/hotImg.899405d3.png" _
               nk="FpHZ31"
               width="30"
               height="30"
               viewBox="0 0 1024 1024">
            <path d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
              p-id="2618"
              fill="#d81e06"></path>
          </svg>
        </h4>

        <div
          th:replace="components/comment/comment-item :: comment_item(${hotComment})"
        ></div>
        <hr />
      </div>

      <!-- 全部评论列表 -->
      <div class="all-comment bg-color-white" th:if="${!#lists.isEmpty(comments)}">
        <h4 class="all-comment-title">
          <em th:text="${#lists.size(comments)}"></em>
          条评论
        </h4>
        <div class="all-comment-item" th:each="comment : ${comments}">
          <div th:replace="components/comment/comment-item :: comment_item(${comment})"></div>
        </div>
      </div>
    </div>

    <!-- 二级评论 Modal -->
    <div
      class="modal fade"
      id="commentModal"
      data-backdrop="static"
      data-keyboard="false"
      tabindex="-1"
      role="dialog"
      aria-labelledby="commentModalDropLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="commentModalDropLabel">回复</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p id="repliedContent" class="comment-content-box-content"></p>
            <div class="input-group">
              <textarea
                id="replyContent"
                placeholder="请输入回复内容"
                class="posts-comment-input-box-textarea"
              ></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button
              id="replyBtn"
              data-reply-id=""
              type="button"
              class="btn btn-primary"
            >
              回复
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</html>
